<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getInfo } from '@/api/login'
import { ElCalendar } from 'element-plus'
import * as echarts from 'echarts'
import {getEmployeeNum,getApprovalNum,getAssessmentPlanNum,getAttendanceNum} from '@/api/home/home.js'

const username = ref('')
const todoItems = ref([
  { id: 1, title: '团队会议', time: '10:00 - 11:00', status: '未完成' },
  { id: 2, title: '项目评审', time: '14:00 - 15:30', status: '未完成' },
  { id: 3, title: '提交报告', time: '17:00', status: '未完成' },
])
const employeeNum = reactive({
  formalNum: 0,
  leaveNum: 0,
  onJobNum: 0,
  probationNum: 0,
  retiredNum: 0,
  waitJobNum: 0,
  waitLeaveNum: 0,
})
const approvalNum = reactive({
  allNum: 0,
  approvalNum: 0,
  bukaApprovalNum: 0,
  chuchaiApprovalNum: 0,
  entryApprovalNum: 0,
  finishedNum: 0,
  formalApprovalNum: 0,
  jiaobanApprovalNum: 0,
  leaveApprovalNum: 0,
  qingjiaApprovalNum: 0,
  salaryApprovalNum: 0,
  transferApprovalNum: 0,
  waichuApprovalNum: 0,
  waitApprovalNum: 0
})
const assessmentPlanNum = reactive({
  doingNum: 0,
  finishedNum: 0,
  waitStartNum: 0,
})
const AttendanceNum = reactive ({
  exceptionNum: 0,
  lateNum: 0,
  leaveEarlyNum: 0,
  missingNum: 0,
  normalNum: 0,
})
const chartRef = ref(null);
let myChart = null;

onMounted(() => {
  // 获取用户信息
  getInfo().then(res => {
    username.value = res.user.userName
  })

  // 初始化员工数量
  getEmployeeNum().then(res => {
    employeeNum.formalNum = res.data.formalNum
    employeeNum.leaveNum = res.data.leaveNum
    employeeNum.onJobNum = res.data.onJobNum
    employeeNum.probationNum = res.data.probationNum
    employeeNum.retiredNum = res.data.retiredNum
    employeeNum.waitJobNum = res.data.waitJobNum
    employeeNum.waitLeaveNum = res.data.waitLeaveNum
  })

  // 初始化柱状图
    myChart = echarts.init(chartRef.value);

  // 初始化审批数量
  getApprovalNum().then(res => {
    approvalNum.allNum = res.data.allNum
    approvalNum.approvalNum = res.data.approvalNum
    approvalNum.bukaApprovalNum = res.data.bukaApprovalNum
    approvalNum.chuchaiApprovalNum = res.data.chuchaiApprovalNum
    approvalNum.entryApprovalNum = res.data.entryApprovalNum
    approvalNum.finishedNum = res.data.finishedNum
    approvalNum.formalApprovalNum = res.data.formalApprovalNum
    approvalNum.jiaobanApprovalNum = res.data.jiaobanApprovalNum
    approvalNum.leaveApprovalNum = res.data.leaveApprovalNum
    approvalNum.qingjiaApprovalNum = res.data.qingjiaApprovalNum
    approvalNum.salaryApprovalNum = res.data.salaryApprovalNum
    approvalNum.transferApprovalNum = res.data.transferApprovalNum
    approvalNum.waichuApprovalNum = res.data.waichuApprovalNum
    approvalNum.waitApprovalNum = res.data.waitApprovalNum

    // 图表配置
      const option = {
        xAxis: {
          type: 'category',
          data: ['入职', '转正', '离职', '调薪', '请假', '调岗', '外出', '出差', '加班', '补卡']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [approvalNum.entryApprovalNum,
                  approvalNum.formalApprovalNum,
                  approvalNum.leaveApprovalNum,
                  approvalNum.salaryApprovalNum,
                  approvalNum.qingjiaApprovalNum,
                  approvalNum.transferApprovalNum,
                  approvalNum.waichuApprovalNum,
                  approvalNum.chuchaiApprovalNum,
                  approvalNum.jiaobanApprovalNum,
                  approvalNum.bukaApprovalNum,],
            type: 'bar'
          }
        ]
      };
      // 设置图表选项
      option && myChart.setOption(option);
  })
  // 监听窗口大小变化，调整图表
  window.addEventListener('resize', handleResize);
  // 获取考核计划数量
  getAssessmentPlanNum().then(res => {
    assessmentPlanNum.doingNum = res.data.doingNum
    assessmentPlanNum.finishedNum = res.data.finishedNum
    assessmentPlanNum.waitStartNum = res.data.waitStartNum
  })
  // 获取考勤数量
  getAttendanceNum().then(res=> {
    AttendanceNum.exceptionNum = res.data.exceptionNum
    AttendanceNum.lateNum = res.data.lateNum
    AttendanceNum.leaveEarlyNum = res.data.leaveEarlyNum
    AttendanceNum.missingNum = res.data.missingNum
    AttendanceNum.normalNum = res.data.normalNum
  })
})

onBeforeUnmount(() => {
  // 组件销毁前释放资源
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
  window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
  // 窗口大小变化时重新调整图表大小
  myChart && myChart.resize();
};
</script>

<template>
  <div class="app-container">
    <!-- 标题 -->
    <div class="title-container">
      <h3 class="title">工作台</h3>
    </div>
    <!-- 用户问候 -->
    <div class="greeting-container" data-label="text">
      <p>
        <span style="font-family:'AppleColorEmoji', 'Apple Color Emoji', sans-serif;font-weight:400;">👏</span>
        <span style="font-family:'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;font-weight:500;"> 早上好，{{username}}！</span>
      </p>
    </div>
    <!-- 员工概况 -->
    <div class="employee-container">
      <h2>员工概况</h2>
      <div class="cards">
        <div class="card">
          <div class="icon blue">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1289.svg" alt="">
          </div>
          <p class="number">{{ employeeNum.formalNum }}</p>
          <p class="label">在职员工</p>
        </div>
        <div class="card">
          <div class="icon purple">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1296.svg" alt="">
          </div>
          <p class="number">{{employeeNum.waitJobNum}}</p>
          <p class="label">待入职员工</p>
        </div>
        <div class="card">
          <div class="icon green">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1303.svg" alt="">
          </div>
          <p class="number">{{employeeNum.probationNum}}</p>
          <p class="label">试用期员工</p>
        </div>
        <div class="card">
          <div class="icon red">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1310.svg" alt="">
          </div>
          <p class="number">{{employeeNum.formalNum}}</p>
          <p class="label">正式员工</p>
        </div>
        <div class="card">
          <div class="icon yellow">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1317.svg" alt="">
          </div>
          <p class="number">{{employeeNum.waitLeaveNum}}</p>
          <p class="label">待离职员工</p>
        </div>
        <div class="card">
          <div class="icon gray">
            <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1324.svg" alt="">
          </div>
          <p class="number">{{employeeNum.leaveNum}}</p>
          <p class="label">已离职员工</p>
        </div>
      </div>
    </div>
    <!-- 三个部分 -->
    <el-row :gutter="20">
      <!-- 快捷入口 -->
      <el-col :span="6">
        <div class="quick-entry-container">
          <h3>快捷入口</h3>
          <div class="shortcut-grid">
            <div class="shortcut-item">
              <div class="icon icon-1">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1240.svg" alt="">
              </div>
              <p>新增员工</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-2">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1248.svg" alt="">
              </div>
              <p>打卡记录</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-3">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1244.svg" alt="">
              </div>
              <p>审批</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-4">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1252.svg" alt="">
              </div>
              <p>社保公积金</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-5">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1232.svg" alt="">
              </div>
              <p>候选人</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-6">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1268.svg" alt="">
              </div>
              <p>会议室预定</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-7">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1260.svg" alt="">
              </div>
              <p>用车记录</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-8">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1256.svg" alt="">
              </div>
              <p>工资条</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-9">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1280.svg" alt="">
              </div>
              <p>公告</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-10">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1272.svg" alt="">
              </div>
              <p>文档库</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-11">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1264.svg" alt="">
              </div>
              <p>新闻</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-12">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1276.svg" alt="">
              </div>
              <p>资产</p>
            </div>
            <div class="shortcut-item">
              <div class="icon icon-13">
                <img src="https://cdn8.axureshop.com/demo2025/2004033/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1236.svg" alt="">
              </div>
              <p>绩效</p>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 日程待办 -->
      <el-col :span="6">
        <div class="schedule-container">
          <div class="card-header">
            <h3>日程待办</h3>
            <a href="#" class="all-plan">查看全部</a>
          </div>
          <el-calendar :range="[new Date(), new Date()]" />
          <div class="todo-list">
            <h4>待办事项</h4>
            <div v-for="item in todoItems" :key="item.id" class="todo-item">
              <div class="todo-content">
                <p class="todo-title">{{ item.title }}</p>
                <p class="todo-time">{{ item.time }}</p>
              </div>
              <span class="todo-status">{{ item.status }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 审批概况 -->
      <el-col :span="12">
        <div class="approval-container">
          <div class="card-header">
            <h3>审批概况</h3>
            <a href="#" class="all-plan">查看详情</a>
          </div>
          <div class="general-sum">
            <el-row gutter="20">
              <el-col :span="6">
                <div class="sum-item">
                  <div class="number">{{approvalNum.allNum}}</div>
                  <p class="label">全部审批</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="sum-item">
                  <div class="number">{{approvalNum.approvalNum}}</div>
                  <p class="label">审批中</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="sum-item">
                  <div class="number">{{approvalNum.finishedNum}}</div>
                  <p class="label">已完成</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="sum-item">
                  <div class="number">{{approvalNum.waitApprovalNum}}</div>
                  <p class="label">待审批</p>
                </div>
              </el-col>
            </el-row>
          </div>
          <div ref="chartRef" class="chart-container" style="width: 100%; height: 400px;"></div>
        </div>
      </el-col>
      <!-- 绩效考核 -->
      <el-col :span="8">
        <div class="performance-container">
          <div class="card-header">
            <h3>绩效考核</h3>
            <a href="#" class="all-plan">全部考核计划</a>
          </div>
          <div class="stats">
            <div class="stat-item">
              <span class="number">{{assessmentPlanNum.waitStartNum}}</span>
              <span class="unit">个</span>
              <p>未开始考核计划</p>
            </div>
            <div class="stat-item">
              <span class="number">{{ assessmentPlanNum.doingNum }}</span>
              <span class="unit">个</span>
              <p>进行中考核计划</p>
            </div>
            <div class="stat-item">
              <span class="number">{{ assessmentPlanNum.finishedNum }}</span>
              <span class="unit">个</span>
              <p>已完成考核计划</p>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 今日考勤 -->
      <el-col :span="8">
        <div class="attendance-container">
          <div class="card-header">
            <h3>今日考勤</h3>
            <a href="#" class="record-link">考勤记录</a>
          </div>
          <div class="stats">
            <div class="stat-item">
              <span class="number">{{AttendanceNum.normalNum}}</span>
              <span class="unit">人</span>
              <p>正常打卡</p>
            </div>
            <div class="stat-item">
              <span class="number">{{ AttendanceNum.exceptionNum }}</span>
              <span class="unit">人</span>
              <p>异常打卡</p>
            </div>
          </div>
          <div class="details">
            <span>迟到：{{AttendanceNum.lateNum}}人</span>
            <span>早退：{{AttendanceNum.leaveEarlyNum}}人</span>
            <span>缺卡：{{AttendanceNum.missingNum}}人</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  min-height: 100vh;
}

.title-container {
  padding: 10px 15px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: #409eff;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}

.greeting-container {
  margin-bottom: 20px;
  padding: 15px;
  background: linear-gradient(135deg, #e6f0fa, #ffffff);
  border-radius: 8px;
  p {
    margin: 0;
    font-size: 18px;
    color: #333;
  }
}

.employee-container {
  margin-bottom: 20px;
  h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
  }
  .card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    &:hover {
      transform: translateY(-5px);
    }
    .icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 24px;
      color: #fff;
      margin-bottom: 10px;
    }
    .number {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .label {
      font-size: 14px;
      color: #666;
    }
  }
}

.quick-entry-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  .shortcut-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .shortcut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    &:hover {
      transform: scale(1.05);
    }
    .icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 20px;
      color: #333;
      margin-bottom: 8px;
    }
    p {
      font-size: 12px;
      color: #333;
    }
  }
}

.schedule-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .all-plan {
      font-size: 14px;
      color: #409eff;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .todo-list {
    margin-top: -25px;
    h4 {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }
    .todo-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #ebeef5;
      &:last-child {
        border-bottom: none;
      }
      .todo-content {
        .todo-title {
          font-size: 14px;
          color: #333;
          margin: 0;
        }
        .todo-time {
          font-size: 12px;
          color: #999;
          margin: 4px 0 0;
        }
      }
      .todo-status {
        font-size: 12px;
        color: #e6a23c;
        font-weight: 500;
      }
    }
  }
}

.approval-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .all-plan {
      font-size: 14px;
      color: #409eff;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.performance-container, .attendance-container {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .all-plan, .record-link {
      font-size: 14px;
      color: #409eff;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
    .stat-item {
      text-align: center;
      .number {
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }
      .unit {
        font-size: 14px;
        color: #999;
      }
      p {
        font-size: 12px;
        color: #666;
        margin: 4px 0 0;
      }
    }
  }
  .details {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #ebeef5;
    padding-top: 12px;
    font-size: 14px;
    color: #666;
  }
}

.blue { background: #409eff; }
.purple { background: #7269ef; }
.green { background: #67c23a; }
.red { background: #f56c6c; }
.yellow { background: #f9c83d; }
.gray { background: #c0c4cc; }
.icon-1 { background: #ffe9b3; }
.icon-2 { background: #cbe5ff; }
.icon-3 { background: #fcd5d5; }
.icon-4 { background: #ffe9e9; }
.icon-5 { background: #c8f3d0; }
.icon-6 { background: #fcd5d5; }
.icon-7 { background: #cbe5ff; }
.icon-8 { background: #c8f3d0; }
.icon-9 { background: #ffe9b3; }
.icon-10 { background: #cbe5ff; }
.icon-11 { background: #c8f3d0; }
.icon-12 { background: #ffe9b3; }
.icon-13 { background: #cbe5ff; }

.chart-container {
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>